<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>首页</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
#main {
    display: -webkit-box; -webkit-box-orient: vertical;
}
#header {position: relative; background-color: #fff; border-bottom: 1px solid #e0e0e0;}
.logo {position: absolute; height: 25px; padding: 12px 20px 13px 20px;}
h1 { height: 50px; line-height: 50px; font-size: 20px; color: #000;font-weight: normal;margin: 0 auto; text-align: center; }
.search {
    position: absolute; right: 50px; bottom: 0px;
    width: 50px; height: 50px;
    background: url(../image/actionbar_search.png) no-repeat center center;
    -webkit-background-size: 24px 24px;
}
.setting {
    position: absolute; right: 0px; bottom: 0px;
    width: 50px; height: 50px;
    background: url(../image/actionbar_setting.png) no-repeat center center;
    -webkit-background-size: 28px 28px;
}
.search-hov {
    background-color: rgb(65,61,61);
}
.setting-hov {
    background-color: rgb(65,61,61);
}
.navbar {
    display: -webkit-box; -webkit-box-orient: horizontal;
    position: relative;
    height: 50px; box-sizing: border-box;
    /*background-color: rgb(231,226.221);*/
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}
.navbar-item {
    display: block; -webkit-box-flex: 1;
    width: 100%; line-height: 50px;
    /*color: rgb(148,127,119);*/ font-size: 18px; text-align: center;color: #9B9C9C;
}
.navbar-item-hov {
    /*background-color: rgba(236,225,210,0.7);*/
    background-color: rgba(254,242,228,0.7);
}
.navbar-item-active {
    /*color: rgb(220,111,0);*/
    color: #ff6836;
}
#navmark {
    position: absolute; left: 0px; bottom: 0px;
    /*height: 2px;
    background-color: rgb(253,133,0);*/
    -webkit-transition: 300ms;
    text-align: center;
width: 33%;
}

#navmark img {position: absolute; bottom: 0; height: 8px;}
</style>
</head>
<body>
    <div id="main">
        <header id="header">
            <img class="logo" src="../image/ic_back_u.png"  tapmode="" onclick="goback()" />
            <h1 id="title">广播</h1>
            
        </header>
        <nav class="navbar">
            <a id="navbar-item-recommend" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(0);">用户信息</a>
            <a id="navbar-item-rank" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(1);">系统信息</a>
            <a id="navbar-item-favorite" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(2);">广播</a>
            <mark id="navmark"><img src="../image/quick_action_arrow_up.png"></mark>
        </nav>
        <section id="content">
        </section>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    function goback () {
        api.closeWin({name:'message'});
    }
    function setFrameGroupIndex(frameIndex) {
        api.setFrameGroupIndex({name:'message',index:frameIndex,scroll:true});
    }
    function setFrameGroupStatus(frameIndex) {
        var title = $api.byId('title');

        switch (frameIndex) {
            case 0: {
                title.innerHTML = '用户消息';
                $api.byId('navbar-item-recommend').className = "navbar-item navbar-item-active";
                $api.byId('navbar-item-rank').className = "navbar-item";
                $api.byId('navbar-item-favorite').className = "navbar-item";
                var num = (api.winWidth/3)*frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");

                break;
            }
            case 1: {
                title.innerHTML = '系统消息';
                $api.byId('navbar-item-recommend').className = "navbar-item";
                $api.byId('navbar-item-rank').className = "navbar-item navbar-item-active";
                $api.byId('navbar-item-favorite').className = "navbar-item";
                var num = (api.winWidth/3)*frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
                break;
            }
            case 2: {
                title.innerHTML = '广播';
                $api.byId('navbar-item-recommend').className = "navbar-item";
                $api.byId('navbar-item-rank').className = "navbar-item";
                $api.byId('navbar-item-favorite').className = "navbar-item navbar-item-active";
                var num = (api.winWidth/3)*frameIndex;
                $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
                break;
            }
            default:
            break;
        }
    }
    apiready = function() {
        var header = $api.byId('header');
        $api.fixIos7Bar(header);
        var headerHeight = $api.byId('header').offsetHeight;
        var scrollHeight = $api.dom('.navbar').offsetHeight;
        $api.byId('navmark').style.width = api.winWidth/3 + 'px';
        api.openFrameGroup({
            name: 'message',
            background: '#FFF',
            rect: {x: 0, y: headerHeight+scrollHeight, w: "auto", h: "auto"},
            index: 0,
            frames: [
                {
                    name: 'usermsg',
                    url: './usermsg_frame.html',
                    bounces: false,
                },
                {
                    name: 'systemmsg',
                    url: './systemmsg_frame.html',
                    bounces: false,
                },
                {
                    name: 'broadcast',
                    url: './broadcast_frame.html',
                    bounces: false,
                }
            ]
        }, function (ret) {
            setFrameGroupStatus(ret.index);
        });

        
    };
</script>
</html>